<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head th:replace="_fragments :: head(~{::title})">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QingFeng's Blog</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
        <link rel="stylesheet" href="../static/css/me.css">
    </head>
    <body>
        <!--导航-->
        <nav th:replace="_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >

            <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
                <i class="sidebar icon"></i>
            </a>
        </nav>

        <!--中间内容-->
        <div  class="m-container-small m-padded-tb-big">
            <div class="ui container">
                <!--header-->
                <div class="ui top attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header" th:text="#{side.type}">分类</h3>
                        </div>
                        <div class="right aligned column">
                            <h2 class="item ui header orange m-inline-block m-text-thin" th:text="${#arrays.length(types)}"> 14 </h2> Types
                        </div>
                    </div>
                </div>

                <div class="ui attached segment m-padded-tb-large">
                    <div class="ui labeled button m-margin-tb-tiny" th:each="type : ${types}">
                        <a href="#" th:href="@{/types/{id}(id=${type.id})}" class="ui basic button" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${type.name}">思考与感悟</a>
                        <div class="ui basic left pointing label" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${#arrays.length(type.blogs)}">24</div>
                    </div>
                </div>

                <div class="ui top attached teal segment">
                    <div class="ui m-padded vertical segment m-padded-lr-wide m-padded-tb-large" th:each="blog : ${page.content}">
                        <div class="ui middle aligned mobile reversed stackable grid">
                            <div class="eleven wide column">
                                <h3 class="ui header"><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">深入理解JAVA虚拟机</a></h3>
                                <p class="m-text" th:text="|${blog.description}...|">A deeply ashamed Australian captain Steve Smith has admitted his team deliberately conspired to cheat on the third day of the third test by having Cameron Bancroft use tape to illegally tamper with the ball.
                                    While Bancroft has been charged by match referee Andy Pycroft and faces a one-test suspension the reputation of Smith and the Australian team is in tatters.
                                </p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui avatar image" style="width: 40px;height: 40px">
                                                <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">QingFeng</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2018-3-25</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> <span th:text="${blog.views}">2342</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column middle aligned">
                                        <a href="#" target="_blank" class="ui teal label basic m-padded-tb-mini m-text-thin" th:text="${blog.type.name}">认知升级</a>
                                    </div>
                                </div>
                            </div>
                            <div class="five wide column middle aligned">
                                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
<!--                                    <img src="/images/wechat1.jpg" th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image" style="width: 400px;height: 200px">-->
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--bottom-->
                <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}" class="ui teal mini basic button">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}" class="ui teal mini basic button">下一页</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <br>
        <br>
        <!--底部footer-->
        <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">

        </footer>

        <!--/*/<th:block th:replace="_fragments :: script">/*/-->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
        <!--/*/</th:block>/*/-->

        <script>

            $('.menu.toggle').click(function () {
                $('.m-item').toggleClass('m-mobile-hide');
            });

        </script>
    </body>
</html>